Skip to main content

webpack 压缩 HTML 代码

开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。

 npm i --save-dev html-webpack-plugin
const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',
    mode:"none",//方便看代码未处理样式
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "14- webpack 压缩 index 代码",
            minify: {
                collapseWhitespace: true,//删除空格、换行
            },
        }),
    ]
};

构建代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>14- webpack 压缩 index 代码</title></head><body><script type="text/javascript" src="main.bundle.js"></script></body></html>
Webpack 打包多页面应用​

正常情况下项目都是打包成一个 index.html 主文件入口就 ok 了,这个是针对单页面 SPA,但像传统项目那种多页面维护的架构,也是可以用 webapack 来打包的 可以实现多文件打包的插件html-webpack-plugin

参考文章：https://juejin.cn/post/6844903895446061070 https://segmentfault.com/a/1190000022499953